<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="./login.html" method="get">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" name="user" placeholder="" value="">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <label for="">手机号:</label>
            <!-- <input type="number" value="0" min="0" max="100" step="5"> -->
            <input type="range" value="0" min="0" max="100" step="5">
        </div>
        <div class="input-group">
            <label for="">出生年份:</label>
            <select name="year">
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
            </select>
            <input type="button" class="setYear" value="设置">
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
        </div>
    </form>
</body>
<script>
    // form
    //     action
    //     method

    // input
    //     type
    //     name
    //     value
    //     placeholder

    // input:number
    //     min
    //     max
    //     step

    // select
    //     value: 1. 如果option中有value属性 => 优先取value值  
    //            2. 如果option中没有value属性  => 则取 option标签中的内容

    //     selectedIndex: 获取和设置 被选中的option的下标



    // var pwdInp = document.getElementsByName("pwd")[0];

    // pwdInp.onfocus = function () {
    //     this.type = "text";
    // }
    // pwdInp.onblur = function () {
    //     this.type = "password";
    // }

    var yearSel = document.getElementsByName("year")[0];
    var setYear = document.querySelector(".setYear");
    // 下拉框切换时触发
    yearSel.onchange = function () {
        // 取值
        console.log(this.value, this.selectedIndex);

    }


    setYear.onclick = function () {
        yearSel.value = 2022;
        yearSel.selectedIndex = 21;
    }

</script>

</html>